<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转按钮</title>
    <style>
        .box{
            width: 600px;
            margin: 200px;


        }
        .box img{
            border: 1px solid #dddddd;
            padding: 10px;
            background: #fff;
            z-index: 1;

        }
        img:hover{
            transform: rotate(360deg)scale(1.2);
        }

    </style>
</head>
<body>
<div id="box" class="box">
    <form>
        <h1>顺时针旋转360度放大1.2倍</h1>
    <ul type="none">
        <li>
            <a href="#"><img src="按钮1.png"></a>
            <a href="#"><img src="按钮2.png"></a>
            <a href="#"><img src="按钮3.png"></a>
            <a href="#"><img src="按钮4.png"></a>
        </li>
    </ul>
    </form>
</div>
</body>
</html>